<template>
  <div class="tab">
      <router-link tag="div" class="tab_item" to="Recommend">
          <span class="tab_span">推荐</span>
      </router-link>
       <router-link tag="div" class="tab_item" to="Singer">
          <span class="tab_span">歌手</span>
      </router-link>
       <router-link tag="div" class="tab_item" to="Rank">
          <span class="tab_span">排行</span>
      </router-link>
       <router-link tag="div" class="tab_item" to="Search">
          <span class="tab_span">搜索</span>
      </router-link>
  </div>
</template>

<script>
export default {
    name:'tab'
}
</script>

<style scoped>
    .tab{
        position: fixed;
        top: 0;
        left: 0;
        width: 10rem;
        height: 1.8rem;
        display: flex;
    }
    .tab_item{
        text-align: center;
        flex-grow: 1;

    }
    .router-link-active{
        color: red;
    }
</style>
